<template>
	<view>
		<view class="mine-top uni-flex">
			<image class="mine-avatar" :src="userInfo.avatar||avatar"></image>
			<view>
				<view class="logined" v-if="hasLogind">
					<text class="username f-m">{{ userInfo.nickName || userInfo.nickname || userInfo.username }}</text>
				</view>
				<view v-else>
					<button class="mine-login" type="default" @click="toLogin">点击登录></button>
				</view>
			</view>
		</view>
		<view class="mine-price-content">
			<view class="mine-price uni-flex">
				<view class="uni-flex uni-column uni-align-items">
					<view class="uni-flex">
						<image class="img" src="../../static/image/money.png" mode="aspectFill"></image>
						<text class="m-l-10">余额</text>
					</view>
					<text class="balance">
						￥{{money}}
					</text>
				</view>
				<view class="cash-out mine-price-btn">
					提现
				</view>
				<view class="uni-flex uni-column uni-align-items">
					<image class="img" src="../../static/image/user.png" mode="aspectFill"></image>
					<view>
						<text>门店销售</text>
					</view>
				</view>
				<view class="apply mine-price-btn" @click="goApply">
					{{ applyStatus  }}
				</view>
			</view>
		</view>
		<view class="mine-order">
			<view class="order-top uni-flex">
				<view class="order-top-title">
					<h3>我的订单</h3>
				</view>
				<view class="order-top-all" @click="getOrder">
					<h4>全部订单 ></h4>
				</view>
			</view>
			<view class="order uni-flex">
				<view class="order-item">
					<image src="../../static/image/toBePaid.jpg" mode=""></image>
					<view>
						待支付
					</view>
				</view>
				<view class="order-item">
					<image src="../../static/image/paid.png"></image>
					<view>
						已支付
					</view>
				</view>
				<view class="order-item">
					<image src="../../static/image/toBeReceived.png"></image>
					<view>
						待接单
					</view>
				</view>
				<view class="order-item">
					<image src="../../static/image/refundOrder.png"></image>
					<view>
						退款订单
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState, mapGetters} from 'vuex'
	export default {
		data() {
			return {
				money:2180,
				avatar:'../../static/image/travel_price.png'
			}
		},
		computed:{
			...mapState(['userInfo', 'token','uid','storeInfo']),
			...mapGetters(['hasLogin']),
			hasExpired(){
				return uni.getStorageSync('uni_id_token_expired') > Date.now()
			},
			applyStatus(){
				let emp = '申请';
				let storeInfo = this.storeInfo;
				let sArr = ['申请中','我的门店','申请'];
				if(storeInfo){
					switch (storeInfo.status){
						case 0:
							emp = sArr[0];
							break;
						case 1:
						case 2:
							emp = sArr[1];
							break;
						default:
							emp = sArr[2];
							break;
					}
				}
				return emp;
			},
			hasLogind(){
				return this.hasLogin && (uni.getStorageSync('uni_id_token_expired') > Date.now())
			}
		},
		onShow() {
			if(this.hasLogind){
				this.$store.dispatch('getUser').then((user)=>{
					if(user){
						this.$store.dispatch('getStore');
					}
				});
			}
		},
		methods: {
			async getStore(v){
				let storeId = this.userInfo.store_id || null;
				let owner = this.userInfo._id || null;
				if(!storeId) return;
				const { data } = await this.$request('store','get',{
					_id:storeId,
					owner
				})
				this.$store.commit('setStoreInfo',data)
			},
			goApply(){
				uni.navigateTo({
					url: '/pages/shop/shop'
				});
			},
			toLogin(){
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},
			getOrder(){
				console.log('geUserInfo',this.userInfo)
				console.log('token',this.token)
			}
		}
	}
</script>

<style>
	page{
		background-color: #e3e3e3;
	}
	.mine-top{
		height: 200rpx;
		border: 1px solid orange;
		line-height: 150rpx;
		align-items: center;
		padding-left: 40rpx;
		background-color: #f99b28;
	}
	.logined{
		margin-left: 30rpx;
	}
	.mine-avatar{
		width: 120rpx;
		height: 120rpx;
	}
	.mine-login{
		background: #ffdab4;
		border-radius: 60rpx;
		line-height: 2;
		font-size: 1rem;
		color: #fb9219;
		margin-left: 30rpx;
	}
	.mine-price-content{
		width: 96%;
		margin: 0 auto;
		position: relative;
		top:-10rpx
	}
	.mine-price{
		justify-content: space-around;
		align-items: center;
		background-color: #fff;
		padding:40rpx 10rpx;
		border-radius: 15rpx;
	}
	.mine-price uni-view{
		font-size: 28rpx;
	}
	.mine-price .img{
		width: 50rpx;
		height: 50rpx;
	}
	.m-l-10{
		margin-left: 15rpx;
	}
	.uni-align-items{
		align-items: center;
	}
	.balance{
		color: #fb9219;
	}
	.cash-out{
		background-color: #f5616d;
	}
	.apply{
		background-color: #07c585;
	}
	.mine-price-btn{
		padding: 0 20rpx;
		border-radius: 20rpx;
		color: #fff;
	}
	.mine-order{
		width: 96%;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 15rpx;
		margin-top: 10rpx;
	}
	.order-top{
		margin:0 40rpx;
		padding: 10rpx 0;
		border-bottom: 1px solid #ccc;
		box-sizing: border-box;
		justify-content: space-between;
		color: #999492;
		align-items: flex-end;
	}
	.order-top-title{
		color: #000;
	}
	.order{
		margin-top: 40rpx;
		justify-content: space-around;
		height: 40vh;
	}
	.order-item{
		text-align: center;
		font-size: 300;
		color: #999492;
	}
	.order-item image{
		width: 80rpx;
		height: 80rpx;
	}
</style>
